<template>
  <div :class="['tc-collapse', topBorder ? 'tc-collapse-top' : '']">
    <div class="tc-collapse-head">
      <slot name="title"></slot>
      <div @click="handleOpen" class="tc-collapse-head-btn">
        <svg-icon v-if="openContent" style="width: 20px; height: 20px;" class-name="minus" icon-class="minus" />
        <svg-icon v-else style="width: 20px; height: 20px;" class-name="plus" icon-class="plus" />
      </div>
    </div>
    <div v-show="openContent" class="tc-collapse-content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script setup name="TcCollapse">
const props = defineProps({
  data: {
    type: Array,
    default() {
      return [];
    }
  },
  topBorder: {
    type: Boolean,
    default() {
      return false;
    }
  },
  open: {
    type: Boolean,
    default() {
      return false;
    }
  }
});

const openContent = ref(false);

const handleOpen = () => {
  openContent.value = !openContent.value;
}

watch(() => props.open, () => {
  openContent.value = props.open;
}, {
  immediate: true
})


</script>

<style lang="scss" scoped>
.tc-collapse {
  border-bottom: 1px solid rgb(189, 189, 189);

  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    font-size: 18px;
    font-weight: 600;

    &-btn {
      color: rgb(210, 0, 0);
      cursor: pointer;

      > span {
        font-size: 30px;
      }
    }
  }

  &-content {
    padding: 20px;
  }
}

.tc-collapse-top {
  border-top: 1px solid rgb(189, 189, 189);
}
</style>

